<template>
    <div class="pro-details">
        <div class="swiper-container banner-pro-container">
            <div class="swiper-wrapper banner-wrapper">
                <div class="swiper-slide banner-pro" v-for="(pic, index) in picGroup" :key="index" >
                    <img :src="pic" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <div class="pro-info">
            <div class="pro-info-h">
                <div class="pro-name">{{ product.name }} {{ product.info }}</div>
                <div class="pro-des">现货</div>
            </div>
            <div class="pro-info-m">
                <div class="pro-address">{{ product.address }}</div>
            </div>
            <div class="pro-info-b">
                <div class="price-group">
                    <span class="pro-price">0.5</span>
                    <span>元</span>/
                    <span class="pro-unit">斤</span>
                </div>
            </div>
        </div>

        <div class="pro-bsn-info">
            <div class="bsn-avator">
                <!-- <img src="./images/bsn-avator.jpg" alt=""> -->
            </div>
            <div class="bsn-des">
                <span class="bsn-name">
                    李晓明
                </span>
                <span class="bsn-level">
                    诚信等级：
                    <span class="bsn-level-value">6级</span>
                </span>
            </div>
        </div>

        <div class="pro-spe">
            <div class="pro-spe-head">
                详细规格
            </div>
            <div class="pro-spe-body">
                这里的显示和通过紧凑索引扫描实现 GROUP BY 也完全一样。实际上，这个 Query 的实现过程中，MySQL 会让存储引擎扫描 group_id = 2 的所有索引键，得出所有的 user_id，然后利用索引的已排序特性，每更换一个 user_id
                的索引键值的时候保留一条信息，即可在扫描完所有 gruop_id = 2 的索引键的时候完成整个 DISTINCT 操作。
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'product-preview',
        props: ['id'],
        data() {
            return {
                name: 'DaoCao',
                picGroup: [],
                product: {
                    name: '',
                    address: '',
                },
                store: {},
            }
        },
        mounted: function () {
            console.log(this.picGroup);
            this.getDetail();
        },
        methods: {
            getDetail() {
                axios.get('/product/detail/' + this.id).then(response => {
                    let product = response.data.data;
                    this.product.name = product.name;
                    this.product.info = product.info;
                    console.log(product.pic_group_url)
                    this.picGroup = product.pic_group_url;
                    this.product.address = product.store.user.address
                    this.$nextTick(function(){
                        new Swiper('.swiper-container', {
                            pagination: {
                                el: '.swiper-pagination',
                                type: 'fraction',
                            },
                        });
                    });

                }).catch( err => {
                    console.log(err);
                });
            }
        }
    }
</script>